<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>首页</title>
    <script src="/static/index/js/vue.js"></script>
    <script src="/static/index/js/moment.min.js"></script>
    <script src="/static/antd/dist/antd.js"></script>
    <link rel="stylesheet" href="/static/antd/dist/antd.css">
    <script src="/static/antd/dist/jquery.js"></script>
    <link rel="stylesheet" href="/static/antd/dist/myLogos.css">
    <link rel="stylesheet" href="/static/antd/dist/footer/style.css">
    <link rel="stylesheet" href="/static/antd/dist/footer/bootstrap.css">

    <style>
        .searLink {
            display: block;
            width: 100%;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }

        .ant-carousel >>> .slick-slide {
            text-align: center;
            height: 160px;
            line-height: 160px;
            background: #364d79;
            overflow: hidden;
        }

        .slick-slide {
            text-align: center;
            height: 160px;
            line-height: 160px;
            background: #364d79;
            overflow: hidden;
        }

        .ant-carousel >>> .slick-slide h3 {
            color: #fff;
        }

        .slick-slide h3 {
            color: #fff;
        }

        /* 轮播图左右箭头 */
        .ant-carousel >>> .slick-slide {
            text-align: center;
            height: 160px;
            line-height: 160px;
            background: #364d79;
            overflow: hidden;
        }

        .slick-slide {
            text-align: center;
            height: 160px;
            line-height: 160px;
            background: #364d79;
            overflow: hidden;
        }

        .ant-carousel >>> .custom-slick-arrow {
            width: 25px;
            height: 25px;
            font-size: 25px;
            color: #fff;
            background-color: rgba(31, 45, 61, 0.11);
            opacity: 0.3;
        }

        .custom-slick-arrow {
            width: 25px;
            height: 25px;
            font-size: 25px;
            color: #fff;
            background-color: rgba(31, 45, 61, 0.11);
            opacity: 0.3;
        }

        .ant-carousel >>> .custom-slick-arrow:before {
            display: none;
        }

        .custom-slick-arrow:before {
            display: none;
        }

        .ant-carousel >>> .custom-slick-arrow:hover {
            opacity: 0.5;
        }

        .custom-slick-arrow:hover {
            opacity: 0.5;
        }

        .ant-carousel >>> .slick-slide h3 {
            color: #fff;
        }

    </style>

</head>

<body>


<div id="app">
    <!-- 菜单栏 -->
    <div>
        <a-tooltip placement="topLeft" title="菜单">
            <a-button style="position: fixed; z-index: 999;top: 5px; left: 5px;" type="primary" @click="showDrawerMenu">
                <a-icon type="menu"></a-icon>
            </a-button>
        </a-tooltip>
        <a-drawer
                title="书山"
                width="320"
                placement="left"
                :closable="false"
                :visible="visibleMenu"
                @close="onCloseMenu"
        >
            <div>
                <a-collapse accordion v-for="(ds, i) in dataSecond ">
                    <a-collapse-panel :key="ds.id" :header="ds.name">
                        <a-collapse accordion change="sss" v-for="(ts, i) in ds.catalog3List ">
                            <a class="searLink" :href=`http://search.shushan.com/list.html?catalog3Id=${ts.id}`>
                                {{ts.name}}</a>
                        </a-collapse>
                    </a-collapse-panel>
                </a-collapse>
            </div>
        </a-drawer>
    </div>
    <!-- 轮播图 -->
    <div style=" width: 100%; height: 80vh; margin: 0 auto;">
        <a-carousel arrows autoplay effect="fade">
            <div
                    slot="prevArrow"
                    slot-scope="props"
                    class="custom-slick-arrow"
                    style=" left: 0;
                            z-index: 99;
                            width: 100px;
                            top: 9px;
                            height: 100%;
                            background: black;
                            display: block;"
            >
                <span class="iconfont icon-jiantouloukong-zuo"></span>
            </div>
            <div
                    slot="nextArrow"
                    slot-scope="props"
                    class="custom-slick-arrow"
                    style="right: 0;
                            display: block;
                            z-index: 99;
                            width: 100px;
                            top: 9px;
                            height: 100%;
                            background: black;">
                <a-icon key="setting" type="setting"></a-icon>
            </div>
            <div style="width: 865px;height: 500px;margin: 0 auto;">
                <img style="width:100%;"
                     src="https://img.zcool.cn/community/01431c598be9d60000002129c119f6.jpg@1280w_1l_2o_100sh.jpg"
                     alt="时间简史"/>
            </div>
            <div style="width: 865px;height: 500px;margin: 0 auto;">
                <img style="width:100%;" src="https://img9.51tietu.net/pic/2019-091112/qlj0ujucwfpqlj0ujucwfp.jpg"
                     alt="书"/>
            </div>
            <div style="width: 865px;height: 500px;margin: 0 auto;">
                <img style="width:100%;"
                     src="https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9345d688d43f8794d69d2578d41b0ef41bd53a01.jpg"
                     alt="时间简史"/>
            </div>
        </a-carousel>
    </div>
    <!-- 登录，搜索 -->
    <div>
        <a-tooltip placement="topLeft" title="搜索/登录">
            <a-button style="position: fixed;top: 5px;left: 56px;z-index: 999;" type="primary" @click="showDrawerSearchOrLogin" class="iconfont icon-search-2-copy">
                <a-icon type="search"></a-icon>/
                <a-icon type="login"></a-icon>
            </a-button>
        </a-tooltip>
        <a-drawer
                title="搜索/登录"
                placement="top"
                height="350"
                :closable="false"
                :visible="visibleSL"
                @close="onCloseSL"
        >
            <div style="width: 50%; margin: 15px auto">
                <a-list
                        class="demo-loadmore-list"
                        item-layout="horizontal"
                >
                    <a-list-item>
                        <a-button @click="login" type="primary" style="width: 49%;" th:if="${session.loginUser==null}">
                            请登录
                        </a-button>
                        <a-button @click="regists" type="primary" style="width: 49%;" th:if="${session.loginUser==null}">
                            注册
                        </a-button>
                        <a-list-item-meta th:if="${session.loginUser!=null}">
                            <a slot="title" style="font-size: 2rem; color: #337ab7;">
                                <span style="color: cadetblue;">欢迎：</span>
                                [[${session.loginUser==null?'111':session.loginUser.nickname}]]
                            </a>
                            <a-avatar slot="avatar" src="https://th.bing.com/th/id/R28d8dca7a21eb72cc568869273cf9e28?rik=d9heqiEjhRrCBg&riu=http%3a%2f%2fwww.hnrdcy.com.cn%2fuploadfiles%2fpictures%2fnews%2f20201029145433_1379.jpg&ehk=6wE9K4PH48KNTFyIIuMFaO1Ti0MyaaEGRtU9%2b7W%2beLY%3d&risl=&pid=ImgRaw"></a-avatar>
                        </a-list-item-meta>
                    </a-list-item>
                </a-list>
            </div>

            <div style="width: 50%; margin: 25px auto">
                <a-button @click="cart" type="primary" style="width: 100%;">
                    购物车
                </a-button>
            </div>
            <div style="width: 50%; margin: 0 auto">
                <a-input-search
                        placeholder="请输入"
                        enter-button="搜索"
                        size="large"
                        @search="onSearch"
                        maxLength="20"
                        allowClear="true"
                >
                </a-input-search>
            </div>
        </a-drawer>
    </div>
    <!-- 简单展示 -->
    <div style="margin-top: 20px;">
        <div style="background-color: #ececec; padding: 20px;">
            <a-row :gutter="16">
                <a-col :span="8">
                    <a-card title="几米作品系列:星空（精装 当当专享定制版）" :bordered="false">
                        <a-card hoverable style="width: 240px; margin: 0 auto;">
                            <img
                                    slot="cover"
                                    alt="example"
                                    src="http://img3m7.ddimg.cn/53/6/29147237-1_u_5.jpg"
                            />
                            <a-card-meta title="作者:几米出版社:现代出版社">
                                <template slot="description">
                                    《以家人之名》凌霄同款珍藏绘本、风靡华人世界的绘本作家幾米的辉煌作品全新包装上市！特别附送超多赠品！带幾米老师超可爱印签信！分享《星空》创作背后的故事！
                                </template>
                            </a-card-meta>
                        </a-card>
                    </a-card>
                </a-col>
                <a-col :span="8">
                    <a-card title="论语别裁（独家授权简体版套装两册）" :bordered="false">
                        <a-card hoverable style="width: 240px; margin: 0 auto;">
                            <img
                                    slot="cover"
                                    alt="example"
                                    src="http://img3m7.ddimg.cn/87/13/25274787-1_u_15.jpg"
                            />
                            <a-card-meta title="作者:南怀瑾出版社:东方出版社">
                                <template slot="description">
                                    南怀瑾先生代表作，“别裁”《论语》，成一家之言，弥合人类的苦难与沧桑，消解历史与现实的隔阂，抚平现世的浮躁与功利。
                                </template>
                            </a-card-meta>
                        </a-card>
                    </a-card>
                </a-col>
                <a-col :span="8">
                    <a-card title="丰子恺万般滋味，都是生活" :bordered="false">
                        <a-card hoverable style="width: 240px; margin: 0 auto;">
                            <img
                                    slot="cover"
                                    alt="example"
                                    src="http://img3m5.ddimg.cn/31/23/25308985-1_u_10.jpg"
                            />
                            <a-card-meta title="作者:丰子恺出版社:华中科技大学出版社">
                                <template slot="description">
                                    央视《读书》栏目、杨澜、延参法师力荐！畅销60万册，全网口碑相传，丰子恺*温暖的散文作品，全彩插图珍藏本。献给曾是孩子的你。愿你永葆童真，并乐此不疲，去生活！超值赠送精美书签1枚，四款明信片随机赠1张
                                </template>
                            </a-card-meta>
                        </a-card>
                    </a-card>
                </a-col>
            </a-row>
        </div>
        <div style="background-color: #ececec; padding: 20px;">
            <a-row :gutter="16">
                <a-col :span="8">
                    <a-card title=" 最美的哲学史 " :bordered="false">
                        <a-card hoverable style="width: 240px; margin: 0 auto;">
                            <img
                                    slot="cover"
                                    alt="example"
                                    src="http://img3m2.ddimg.cn/51/14/29219802-1_u_9.jpg"
                            />
                            <a-card-meta title="作者:［法］吕克·费希［法］克劳德·卡佩里耶 著; 胡扬 译出版社:上海书店出版社">
                                <template slot="description">

                                    最美的哲学史
                                    精装典藏版！复旦大学张汝伦教授力荐！附赠5张精美明信片！没有学究气的哲学史，告诉你什么人生值得过！审视过去与未来，开启心灵的旅程！
                                </template>
                            </a-card-meta>
                        </a-card>
                    </a-card>
                </a-col>
                <a-col :span="8">
                    <a-card title="画给孩子的丝绸之路：精装彩绘本（历史学家、民俗学家执笔撰写）" :bordered="false">
                        <a-card hoverable style="width: 240px; margin: 0 auto;">
                            <img
                                    slot="cover"
                                    alt="example"
                                    src="http://img3m8.ddimg.cn/19/34/29191258-1_u_3.jpg"
                            />
                            <a-card-meta title="作者:桑亚春著出版社:台海出版社">
                                <template slot="description">
                                    （给孩子量身打造的“一带一路”科普启蒙图书，从古到今，从长安到罗马，从陆地到海洋，讲述了一段世界历史传奇。让孩子们穿越时空，重走丝绸之路，领略世界文明的风采。）
                                </template>
                            </a-card-meta>
                        </a-card>
                    </a-card>
                </a-col>
                <a-col :span="8">
                    <a-card title="马克思哲学要义" :bordered="false">
                        <a-card hoverable style="width: 240px; margin: 0 auto;">
                            <img
                                    slot="cover"
                                    alt="example"
                                    src="http://img61.ddimg.cn/digital/product/24/2/1901072402_ii_cover.jpg?version=b375c582-7cb3-4379-b38c-1a97c8d58522"
                            />
                            <a-card-meta title="作者：赵敦华 出版社：江苏人民出版社">
                                <template slot="description">
                                    关于马克思哲学研究的原创厚重之作！
                                    深度解读马克思哲学的核心思想和内在精神！
                                    五个全新视角阐释，难得一见的学术佳品！
                                    赵敦华先生zui新力作！
                                </template>
                            </a-card-meta>
                        </a-card>
                    </a-card>
                </a-col>
            </a-row>
        </div>
        <div style="background-color: #ececec; padding: 20px;">
            <a-row :gutter="16">
                <a-col :span="8">
                    <a-card title="文城（余华新书，时隔8年重磅归来，《活着》之后又一精彩力作！限量赠送珍藏余华肖像漫画）" :bordered="false">
                        <a-card hoverable style="width: 240px; margin: 0 auto;">
                            <img
                                    slot="cover"
                                    alt="example"
                                    src="http://img3m0.ddimg.cn/83/2/29199440-1_u_17.jpg"
                            />
                            <a-card-meta title="作者:余华 著 ， 新经典 出品出版社:北京十月文艺出版社">
                                <template slot="description">
                                    余华时隔8年重磅新作！写《活着》的余华又回来了！人生就是自己的往事和他人的序章。关于一个人和他一生的寻找，以及一群人和一个汹涌的年代。精彩过瘾，不负等待！易烊千玺挚爱作家。限量赠送余华珍藏生肖漫画！
                                </template>
                            </a-card-meta>
                        </a-card>
                    </a-card>
                </a-col>
                <a-col :span="8">
                    <a-card title="中国话(九大领域诠释中国话的前世今生,了解中国人与中国话的互动关系,读这本就够了!)" :bordered="false">
                        <a-card hoverable style="width: 240px; margin: 0 auto;">
                            <img
                                    slot="cover"
                                    alt="example"
                                    src="http://img61.ddimg.cn/digital/product/95/58/1901259558_ii_cover.jpg?version=e7ef8421-7b02-4c88-8a3c-1154aeb9e5de"
                            />
                            <a-card-meta title="作者：郑子宁 出版社：九州出版社">
                                <template slot="description">
                                    九大领域解读中国话的起源与传播
                                    重新发现中国人的文化史
                                    ◎粮食作物称谓的传播
                                    ——为什么东非马达加斯加岛和印尼群岛上“米”的发音都非常相似？
                                    ——为什么中国普遍北方吃粳米，南方吃籼米？
                                    ——为什么中国台湾的阿美人会把“小米”供奉为神灵？
                                    ◎家畜动物称谓的兴衰
                                    ——为什么历史上“猪”的曾用字“彘”“豕”“豝”都消失了？
                                </template>
                            </a-card-meta>
                        </a-card>
                    </a-card>
                </a-col>
                <a-col :span="8">
                    <a-card title="乡土中国电子书" :bordered="false">
                        <a-card hoverable style="width: 240px; margin: 0 auto;">
                            <img
                                    slot="cover"
                                    alt="example"
                                    src="http://img61.ddimg.cn/digital/product/25/37/1901092537_ii_cover.jpg?version=fbaca61b-0c2f-4feb-9375-f94c4b4165ca"
                            />
                            <a-card-meta title="作者：费孝通 出版社：北京时代华文书局">
                                <template slot="description">
                                    1、费孝通家人张荣华先生亲自授权出版。
                                    2、中国人民大学人类研究所所长、费老晚年室弟子赵旭东教授撰写2000千字导读推荐。
                                    3、从美国盖蒂研究所馆藏古籍中辑录优质配图，拓展知识，丰富阅读体验。
                                    4、对照1948年初版校订。
                                    5、特别邀请专业女声主播朗读全文，随书附赠，扫码可听。
                                    6、封面设计时尚质感，专为年轻读者量身制作。
                                    7、学界公认中国乡土社会传统文化和社会结构理论研究代表作，畅销70余年传统文化经典门作品。
                                </template>
                            </a-card-meta>
                        </a-card>
                    </a-card>
                </a-col>
            </a-row>
        </div>
    </div>
    <!-- 标签页简单展示 -->
    <div>
        <div style="padding: 10px;margin: 15px; box-shadow: 2px 2px 2px rgba(0 ,0, 0, 0.3);">
            <div style="width: 98%;">
                <a-radio-group v-model="mode" :style="{ marginBottom: '8px' }">
                    <a-radio-button value="top">
                        ↔
                    </a-radio-button>
                    <a-radio-button value="left">
                        ↕
                    </a-radio-button>
                </a-radio-group>
                <a-tabs
                        default-active-key="1"
                        :tab-position="mode"
                        :style="{ height: '600px' }"
                >
                    <a-tab-pane tab="春" key="1">
                        <a-row :gutter="[16,16]" style="text-align: center;">
                            <a-col :span="8">
                                <a-card hoverable style="width: 300px; margin: 0 auto;" >
                                    <img
                                            slot="cover"
                                            alt="example"
                                            src="http://img3m2.ddimg.cn/32/0/25294532-1_w_3.jpg"
                                    />
                                    <a-card-meta title="春（巴金代表作，激流三部曲第二部，人民文学出版社2018年平装新版）" description="传世的作品，权威的版本，巴金家属认可的*美装帧，给你一个历久弥新的《家》《春》《秋》！ ">
                                        <a-avatar
                                                slot="avatar"
                                                src="http://img3m2.ddimg.cn/32/0/25294532-1_x_3.jpg"></a-avatar>
                                    </a-card-meta>
                                </a-card>
                            </a-col>
                            <a-col :span="8">
                                <a-card hoverable style="width: 300px; margin: 0 auto;" >
                                    <img
                                            slot="cover"
                                            alt="example"
                                            src="http://img3m2.ddimg.cn/30/19/29201862-1_u_8.jpg"
                                    />
                                    <a-card-meta title="春风故事" description="（全面展现中国工业风雷激荡三十年，可媲美《大江大河》，讲述一代产业工人如何应对变革、顺应时代、谋求发展，涅槃重生的佳作） ">
                                        <a-avatar
                                                slot="avatar"
                                                src="http://img3m2.ddimg.cn/30/19/29201862-1_x_8.jpg"></a-avatar>
                                    </a-card-meta>
                                </a-card>
                            </a-col>
                            <a-col :span="8">
                                <a-card hoverable style="width: 300px; margin: 0 auto;" >
                                    <img
                                            slot="cover"
                                            alt="example"
                                            src="http://img3m1.ddimg.cn/54/30/29205351-1_u_3.jpg"
                                    />
                                    <a-card-meta title="春山谣" description="十几名还没满二十岁的上海青年，来到长江中游一个叫作春山岭的乡村，新的环境让他们感到震撼，新的生活时刻在考验着他们。">
                                        <a-avatar
                                                slot="avatar"
                                                src="http://img3m1.ddimg.cn/54/30/29205351-1_x_3.jpg"></a-avatar>
                                    </a-card-meta>
                                </a-card>
                            </a-col>
                        </a-row>
                    </a-tab-pane>
                    <a-tab-pane tab="夏" key="2">
                        <a-row :gutter="[16,16]" style="text-align: center;">
                            <a-col :span="8">
                                <a-card hoverable style="width: 300px; margin: 0 auto;" >
                                    <img
                                            slot="cover"
                                            alt="example"
                                            src="http://img3m8.ddimg.cn/86/8/28533668-1_u_5.jpg"
                                    />
                                    <a-card-meta title="夏洛的网(2020版" description="三年级必读经典书目，“美国*伟大的十部儿童文学名著”之首，全球行销千万册，关于爱、友谊、生死，一本读到流泪的“真正的书”儿童文学 ">
                                        <a-avatar
                                                slot="avatar"
                                                src="http://img3m8.ddimg.cn/86/8/28533668-1_x_5.jpg"></a-avatar>
                                    </a-card-meta>
                                </a-card>
                            </a-col>
                            <a-col :span="8">
                                <a-card hoverable style="width: 300px; margin: 0 auto;" >
                                    <img
                                            slot="cover"
                                            alt="example"
                                            src="http://img3m7.ddimg.cn/17/13/29214917-1_u_3.jpg"
                                    />
                                    <a-card-meta title="夏日踟躇 古典与现代之间的渡引者 李渝短篇小说精选集" description="古典与现代之间的渡引者，李渝短篇小说精选集， 收录“时报文学奖”首奖作品与哈佛大学教授王德威专序。 时代纷杂在她的笔下静谧如画， 而留白处，是暴虐无声的个人苦难。 ">
                                        <a-avatar
                                                slot="avatar"
                                                src="http://img3m7.ddimg.cn/17/13/29214917-1_x_3.jpg"></a-avatar>
                                    </a-card-meta>
                                </a-card>
                            </a-col>
                            <a-col :span="8">
                                <a-card hoverable style="width: 300px; margin: 0 auto;" >
                                    <img
                                            slot="cover"
                                            alt="example"
                                            src="http://img3m9.ddimg.cn/34/34/25146529-4_u_1.jpg"
                                    />
                                    <a-card-meta title="生如夏花 诺贝尔文学奖得主泰戈尔代表作 中英双语郑振铎名译全彩珍藏版 " description="收录名著导读书目《新月集》《飞鸟集》，诺贝尔文学奖得主、亚洲诗圣泰戈尔纪念大师珍藏版，平装全彩4色。《朗读者》节目推荐，郑振铎权威译本，无问西东，影响了徐志摩、林徽因、冰心等一代诗人 ">
                                        <a-avatar
                                                slot="avatar"
                                                src="http://img3m9.ddimg.cn/34/34/25146529-1_x_1.jpg"></a-avatar>
                                    </a-card-meta>
                                </a-card>
                            </a-col>
                        </a-row>
                    </a-tab-pane>
                    <a-tab-pane tab="秋" key="3">
                        <a-row :gutter="[16,16]" style="text-align: center;">
                            <a-col :span="8">
                                <a-card hoverable style="width: 300px; margin: 0 auto;" >
                                    <img
                                            slot="cover"
                                            alt="example"
                                            src="//img10.360buyimg.com/n1/jfs/t20113/265/1910596392/87266/945b1aab/5b29d71cNee1d2261.jpg"
                                    />
                                    <a-card-meta title="秋（人文社纪念版 平装版） " description="传世的作品，巴金家属认可的精美装帧，给你一个历久弥新的《家》《春》《秋》">
                                        <a-avatar
                                                slot="avatar"
                                                src="//img10.360buyimg.com/n5/jfs/t20113/265/1910596392/87266/945b1aab/5b29d71cNee1d2261.jpg"></a-avatar>
                                    </a-card-meta>
                                </a-card>
                            </a-col>
                            <a-col :span="8">
                                <a-card hoverable style="width: 300px; margin: 0 auto;" >
                                    <img
                                            slot="cover"
                                            alt="example"
                                            src="//img10.360buyimg.com/n1/jfs/t1/54026/38/2060/553774/5cfe0e2aEa282ab9a/89cbe761284b9cad.jpg"
                                    />
                                    <a-card-meta title="秋（顺畅好读的意识流小说，“季节四部曲”第一部）" description="顺畅好读的意识流小说。13岁女孩与85岁老人的真挚情谊如何抵御时间的洪流？英国退欧、特朗普执政，公共历史将怎样影响我们的命运？">
                                        <a-avatar
                                                slot="avatar"
                                                src="//img10.360buyimg.com/n5/jfs/t1/54026/38/2060/553774/5cfe0e2aEa282ab9a/89cbe761284b9cad.jpg"></a-avatar>
                                    </a-card-meta>
                                </a-card>
                            </a-col>
                            <a-col :span="8">
                                <a-card hoverable style="width: 300px; margin: 0 auto;" >
                                    <img
                                            slot="cover"
                                            alt="example"
                                            src="//img10.360buyimg.com/n1/jfs/t1/149172/4/4393/492788/5f27dc37E6afee78e/71aa72bcae0edf50.jpg"
                                    />
                                    <a-card-meta title="小城春秋 " description="一部厚重的红色经典，一段鲜活的厦门传奇">
                                        <a-avatar
                                                slot="avatar"
                                                src="//img10.360buyimg.com/n5/jfs/t1/149172/4/4393/492788/5f27dc37E6afee78e/71aa72bcae0edf50.jpg"></a-avatar>
                                    </a-card-meta>
                                </a-card>
                            </a-col>
                        </a-row>
                    </a-tab-pane>
                    <a-tab-pane tab="冬" key="4">
                        <a-row :gutter="[16,16]" style="text-align: center;">
                            <a-col :span="8">
                                <a-card hoverable style="width: 300px; margin: 0 auto;" >
                                    <img
                                            slot="cover"
                                            alt="example"
                                            src="//img14.360buyimg.com/n1/jfs/t1/149253/20/9537/160978/5f7068c1E0a745660/ea806bd25d89bdf3.jpg"
                                    />
                                    <a-card-meta title="大师人文课堂 《济南的冬天》" description="跟大作家察人生百态，走进母语世界">
                                        <a-avatar
                                                slot="avatar"
                                                src="//img13.360buyimg.com//n0/jfs/t874/103/511200101/616224/b633b7bb/5534926fN8a64b03c.jpg"></a-avatar>
                                    </a-card-meta>
                                </a-card>
                            </a-col>
                            <a-col :span="8">
                                <a-card hoverable style="width: 300px; margin: 0 auto;" >
                                    <img
                                            slot="cover"
                                            alt="example"
                                            src="//img10.360buyimg.com/n1/jfs/t1/54026/38/2060/553774/5cfe0e2aEa282ab9a/89cbe761284b9cad.jpg"
                                    />
                                    <a-card-meta title="冬天里的春天" description="《冬天里的春天（套装上下册）》通过对主人公于而龙近半个世纪丰富复杂的个人生活的描述和对其个人性格的刻画，宏观微观相结合地表现了建国后17年，再到'文革'10年和粉碎'四人帮'后，这期间长达四十余年的社会斗争和个人在时代中的命运，并通过不断的倒叙、插叙和正叙，通过各种形式的对比，表现了'春天在人民心里'的主题。">
                                        <a-avatar
                                                slot="avatar"
                                                src="//img13.360buyimg.com/n5/jfs/t874/103/511200101/616224/b633b7bb/5534926fN8a64b03c.jpg"></a-avatar>
                                    </a-card-meta>
                                </a-card>
                            </a-col>
                            <a-col :span="8">
                                <a-card hoverable style="width: 300px; margin: 0 auto;" >
                                    <img
                                            slot="cover"
                                            alt="example"
                                            src="//img10.360buyimg.com/n1/jfs/t7735/100/608202936/376769/bf0810bd/59953f61N651819c8.jpg"
                                    />
                                    <a-card-meta title="世界大作家寄小读者丛书：冬天的礼物(魔法象·故事森林)" description="魔法象故事森林世界大作家寄小读者丛书ME060《冬天的礼物》：世界经典童话精选集，大师级作品，关于爱、友谊、生命。献给孩子一份经过时间沉淀的礼物。">
                                        <a-avatar
                                                slot="avatar"
                                                src="//img10.360buyimg.com/n5/jfs/t7735/100/608202936/376769/bf0810bd/59953f61N651819c8.jpg"></a-avatar>
                                    </a-card-meta>
                                </a-card>
                            </a-col>
                        </a-row>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="mkl_footer" style="background-image: url('https://img.zcool.cn/community/01431c598be9d60000002129c119f6.jpg@1280w_1l_2o_100sh.jpg')">
        <div class="sub-footer" style="background: rgba(8 ,10 ,12, 0.8);">
            <div class="container">
                <div class="mkls_footer_grid">
                    <div class="col-xs-4 mkls_footer_grid_left">
                        <h4>地址:</h4>
                        <p>贵州省贵阳市清镇市,
                            <br> 云岭东路</p>
                    </div>
                    <div class="col-xs-4 mkls_footer_grid_left">
                        <h4>联系</h4>
                        <p>
                            <span>电话 : </span>182 xxxx 8687</p>
                        <p>
                            <span>邮箱 : </span>
                            <a href="#" style="color: #1890ff;">m182xxxx8687@163.com</a>
                        </p>
                    </div>
                    <div class="col-xs-4 mkls_footer_grid_left">
                        <h4>营业时间:</h4>
                        <p>全天候</p>
                        <p>每周五维护
                            <span>(数据服务)</span>
                        </p>
                    </div>
                    <div class="clearfix"> </div>
                </div>
            </div>
        </div>
        <div class="footer-copy-right">
            <div class="container">
                <div class="allah-copy">
                    <p>Copyright &copy; 2021.书山 <a href="http://shushan.com" target="_blank" ></a></p>
                </div>
                <div class="footercopy-social">
                    <ul>
                        <li>
                            <a href="#">
                                <span class="fa fa-facebook"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-twitter"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-rss"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-vk"></span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <!-- 顶部锚点 -->
    <div>
        <a-back-top></a-back-top>
    </div>
    <!-- 我的订单按钮 -->
    <div th:if="${session.loginUser!=null}" style="position:fixed; top: 5px; right: 5px;z-index: 99;">
        <a-affix :offset-top="top">
            <a-button th:href="'http://member.shushan.com/memberOrder.html'" type="primary">
                我的订单
            </a-button>
        </a-affix>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                visibleMenu: false,
                visibleSL: false,
                dataFirst: [],
                dataSecond: [],
                mode: 'top',
                top: 5
            };
        },
        methods: {
            showDrawerMenu() {
                this.visibleMenu = true;
                if (JSON.parse(JSON.stringify(this.dataSecond)).length === 0) {
                    $.getJSON("index/json/catalog.json").then(res => {
                        // console.log(res)
                        this.dataFirst = res
                        this.a = JSON.parse(JSON.stringify(this.dataFirst))
                        console.log('this.dataFirst', this.dataFirst)

                        this.dataFirst[`1`].map(item => {
                            // console.log([item.name])
                            this.dataSecond.push(
                                {
                                    name: item.name,
                                    catalog1Id: item.catalog1Id,
                                    catalog3List: item.catalog3List,
                                    id: item.id
                                }
                            )
                        })
                        this.b = JSON.parse(JSON.stringify(this.dataSecond))

                    })
                }
            },
            showDrawerSearchOrLogin() {
                this.visibleSL = true;
            },
            onCloseMenu() {
                this.visibleMenu = false;
            },
            onCloseSL() {
                this.visibleSL = false;
            },
            onSearch(keyword){
                window.location.href="http://search.shushan.com/list.html?keyword="+keyword;
                console.log('搜索值',value);
            },
            login() {
                window.location.href="http://auth.shushan.com/login.html";
            },
            regists() {
                window.location.href="http://auth.shushan.com/reg.html";
            },
            cart() {
                window.location.href="http://cart.shushan.com/cart.html";
            },
            sss() {
                /*setTimeout(() => {

                    console.log('12312312',JSON.parse(JSON.stringify(this.dataSecond)).length)
                    if (JSON.parse(JSON.stringify(this.dataSecond)).length === 0) {
                        let nameStr = []
                        this.dataSecond.map(item => {
                            nameStr.push({
                                name: item.name,
                                catalog1Id: item.catalog1Id,
                                catalog3List: item.catalog3List,
                                id: item.id
                            })
                        })
                        this.dataSecond.map(item => {
                            this.dataThird.push(item.catalog3List)
                        })

                        // for (let i = 0; i < nameStr.length; i++) {
                        //         $("#header_main_left_a_1").children("a.ant-dropdown-link").append(nameStr[i])
                        //     }
                        console.log("4444", JSON.parse(JSON.stringify(this.dataThird))[0][0].name)
                    }

                }, 0)*/
            }
        },
    });
</script>
</body>

<!--<script type="text/javascript" src="/static/index/js/text.js"></script>-->
<!--<script type="text/javascript" src="/static/index/js/header.js"></script>-->
<!--<script type="text/javascript" src="/static/index/js/secend.js"></script>-->
<!--<script type="text/javascript" src="/static/index/js/zz.js"></script>-->
<!--<script type="text/javascript" src="/static/index/js/index.js"></script>-->
<!--<script type="text/javascript" src="/static/index/js/left,top.js"></script>-->
<!--<script type="text/javascript" src="/static/index/js/catalogLoader.js"></script>-->

</html>